<template>
  <el-dialog
    class="custom-dialog"
    v-model="dialogVisible"
    title="重点区域详情"
    width="600px"
    @close="handleClose"
  >
    <div class="custom-detail">
      <el-row :gutter="20">
        <el-col :span="24">
          <span class="label">所在园区:</span>
          <span class="value">{{ form.parkName }}</span>
        </el-col>
        <el-col :span="24">
          <span class="label">关联房屋:</span>
          <span class="value">{{ form.houseName }}</span>
        </el-col>
        <el-col :span="24">
          <span class="label">区域名称:</span>
          <span class="value">{{ form.name }}</span>
        </el-col>
        <el-col :span="24">
          <span class="label">区域描述:</span>
          <span class="value">{{ form.remark }}</span>
        </el-col>
        <el-col :span="24">
          <span class="label">承租类型:</span>
          <span class="value">{{ getDictValue('yn', form.keyArea) }}</span>
        </el-col>
      </el-row>
      <div class="title">关联设备序列号</div>
      <el-table class="custom-table" :data="form.equipmentInfos">
        <el-table-column prop="name" label="设备名称" />
        <el-table-column prop="code" label="设备序列号" />
        <el-table-column prop="location" label="设备位置" />
        <el-table-column prop="status" label="设备状态">
          <template #default="scope">
            <el-tag :type="getDictStyle('device_status', scope.row.status)">{{
              getDictValue('device_status', scope.row.status)
            }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>
<script setup>
import { ref, watch } from 'vue'
import FileList from '@/components/fileList/index.vue'
import { keyAreaDetail } from '@/api/manager/dataManage/keyAreaManage.js'
import { useDict } from '@/hooks/useDict'
const {
  dictOptions,
  initListDictOptions,
  initTreeDictOptions,
  getDictValue,
  getDictStyle,
} = useDict()
const props = defineProps({
  detail: {
    type: Object,
    default: () => {},
  },
})
watch(
  () => props.detail,
  async () => {
    if (props.detail.pkid && dialogVisible.value) {
      handleDetail()
    }
  },
)
const emit = defineEmits(['close'])
const dialogVisible = ref(false)
const handleClose = () => {
  dialogVisible.value = false
  emit('close')
}
const form = ref({
  fileList: [],
})
const handleDetail = async () => {
  const res = await keyAreaDetail({ pkid: props.detail.pkid })
  if (res.success) {
    res.data.houseName = res.data.houseList
      .map((i) => {
        return i.name
      })
      .join(',')
    form.value = { ...res.data }
  } else {
    ElMessage.error(res.message)
  }
}
defineExpose({ dialogVisible })
</script>
<style lang="scss" scoped>
.custom-detail {
  padding: 0;
}
.title {
  font-size: 16px;
  line-height: 30px;
  font-weight: 500;
  color: #151515;
  margin-bottom: 20px;
  position: relative;
  padding-left: 10px;

  &::before {
    content: ' ';
    position: absolute;
    left: 0;
    top: 7px;
    width: 4px;
    height: 16px;
    background: linear-gradient(0deg, #4575ee 0%, #6297f5 100%);
    border-radius: 2px;
  }
  .el-button {
    margin-left: 25px;
  }
}
</style>
